<template>
  <view class="p-t-42 p-l-30 p-r-30">
    <view class="add p-l-32 p-r-30">
      <view class="flex-between h-104">
        <view class="w-154 font-28 color-1a font-weight-500 h-104 lh-104">卡号</view>
        <view class="flex-1 border-bottom h-104">
          <input class="h-104" v-model="bank_account" placeholder="请输入银行卡号"/>
        </view>
      </view>
      <view class="flex-between h-104">
        <view class="w-154 font-28 color-1a font-weight-500 h-104 lh-104">开户行</view>
        <view class="flex-1 border-bottom h-104">
          <input class="h-104" v-model="branch_bank_name" placeholder="请输入开户银行"/>
        </view>
      </view>
      <view class="flex-between h-104">
        <view class="w-154 font-28 color-1a font-weight-500 h-104 lh-104">开户名</view>
        <view class="flex-1 border-bottom h-104">
          <input class="h-104" v-model="realname" placeholder="请输入开户名"/>
        </view>
      </view>
      <view class="flex-between h-104">
        <view class="w-154 font-28 color-1a font-weight-500 h-104 lh-104">身份证号</view>
        <view class="flex-1 border-bottom h-104">
          <input class="h-104" v-model="id_card" placeholder="请输入身份证号"/>
        </view>
      </view>
    </view>

    <FixedBottom :isFixed="true" bg-color="#fff">
      <view class="flex-center p-t-26 p-b-26">
        <view class="btn flex-center color-c font-32" @click="add">{{ !id ? '添加' : '编辑' }}</view>
      </view>
    </FixedBottom>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id:'',
      id_card:'',
      realname:'',
      branch_bank_name:'',
      bank_account:""
    };
  },
  onLoad(ops) {
    this.id = ops.id
    if(this.id){
      this.getDetail()
      uni.setNavigationBarTitle({
        title: '编辑银行卡'
      })
    }
  },
  methods: {
    async getDetail(){
      const res = await this.$api.common.user('getUserBankCardInfo',{
        id: this.id
      })
      if(res.code === 200){
        let { bank_account, branch_bank_name, realname, id_card } = res.data
        this.bank_account = bank_account
        this.branch_bank_name = branch_bank_name
        this.realname = realname
        this.id_card = id_card
      }
    },
    async add() {
      let api = this.id ? 'editBankCard' : 'addBankCard'
      let res = await this.$api.common.user(api, {
        id: this.id,
        bank_account: this.bank_account,
        branch_bank_name: this.branch_bank_name,
        realname: this.realname,
        id_card: this.id_card,
      })
      if (res.code === 200) {
        this.showMsg('添加成功')
        this.goBack()
      }
    }
  },
}
</script>

<style lang="scss">
.add {
  width: 690rpx;
  background: #FFFFFF;
  border-radius: 32rpx;
  box-sizing: border-box;
}

.color-1a{
  color: #1A1A1A;
}

.btn{
  width: 686rpx;
  height: 88rpx;
  background: linear-gradient( 117deg, #FE515F 0%, #FB2D19 20%, #FB2D19 59%, #FC7916 100%);
  border-radius: 44rpx;
}

</style>
